/* eslint-disable react/jsx-no-undef */
import React from "react"
import { axios } from "axios"
import { Swiper, SwiperSlide } from "swiper/react"; // 引入js
import "swiper/swiper.min.css";
import SwiperCore, { Pagination } from "swiper/core";
import "swiper/components/pagination/pagination.min.css";
SwiperCore.use(Pagination);

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           headeLIst:[],
           tabIndex:-1
        }
    }// fetch axios
    componentDidMount() {
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res=>{
            if(res.data.msg=='操作成功'){
                this.setState({
                   headeLIst:res.data.result
                })
            }
        })

    }
    handerOver(index){
        this.setState({
          tabINdex:index
        })
    }
    render() {
        return  <div className="re">
            
            <ul className="app-header-nav">
                {this.state.headeLIst.length>0&&
                <li className="home">首页</li>}
                {this.state.headeLIst.map((i,index)=>{
                    return <li key={index} 
                    onMouseOver={this.handerOver.bind(this,index)}>
                        <Link to={'/home'+i.id}>{i.name}</Link>
                        <div className={` layer `}>
                            <ul>
                                {i.childern.map((item,index)=>{
                                    return <li key={index}>
                                        <img src={item.picture} alt="" />
                                        <P>{item.name}</P>
                                    </li>
                                })}
                            </ul>
                        </div>
                    </li>
                })}
            </ul>
        
        </div>
    }
}